<template>
  <nav-bar title="个人资料" left-text="" left-arrow @click-left="onClickLeft" />
  <ul class="data">
    <overlay :show="show" @click="overshow" />
    <div class="head" v-show="headshow">
      <p>
        <span class="pan">拍照</span>
        <span @click="selImg">从相册选取</span>
      </p>
      <p>
        <span @click="overshow">取消</span>
      </p>
    </div>

    <li @click="head">
      头像
      <icon name="arrow" class="icon" />
      <input type="file" style="display: none" ref="fileTag" @change="selEnd" />
      <img :src="Imgurl" alt="破损" class="tx" />
    </li>

    <router-link :to="{ name: 'User-email' }">
      <cell title="邮箱" :value="email" is-link />
    </router-link>

    <router-link :to="{ name: 'User-name' }"
      ><cell title="昵称" :value="username" is-link
    /></router-link>

    <cell title="账号" :value="nickname" is-link @click="noNickname" />

    <cell title="性别" :value="sex" is-link @click="gender" />
    <div class="gender" v-show="genshow">
      <p>选择性别</p>
      <div>
        <div>
          <i
            class="fa fa-mars"
            aria-hidden="true"
            @click="gen = 0"
            :id="gen == 0 ? 'genblue' : ''"
          ></i>
          <span>男</span>
        </div>
        <div>
          <i
            class="fa fa-venus"
            aria-hidden="true"
            @click="gen = 1"
            :id="gen == 1 ? 'genblue' : ''"
          ></i>
          <span>女</span>
        </div>
      </div>
      <button @click="clockgen">确认</button>
    </div>
    <!-- 日期 -->

    <cell title="生日" value="未设置" is-link @click="data" />
  </ul>
  <ul class="learn">
    <!-- 学科 -->
    <cell title="关注学科" :value="xueke" is-link @click="sub" />
    <div class="Subject" v-show="Subshow">
      <p>科目</p>
      <div class="eng">
        <p>
          <span @click="engidx = 1" :class="engidx == 1 ? 'engblue' : ''"
            >初中数学</span
          >
        </p>
        <p>
          <span @click="engidx = 2" :class="engidx == 2 ? 'engblue' : ''"
            >经典语文</span
          >
        </p>
        <p>
          <span @click="engidx = 3" :class="engidx == 3 ? 'engblue' : ''"
            >趣味英语</span
          >
        </p>
        <p>
          <span @click="engidx = 4" :class="engidx == 4 ? 'engblue' : ''"
            >初中物理</span
          >
        </p>
        <p>
          <span @click="engidx = 5" :class="engidx == 5 ? 'engblue' : ''"
            >初中化学</span
          >
        </p>
        <p>
          <span @click="engidx = 6" :class="engidx == 6 ? 'engblue' : ''"
            >高中数学</span
          >
        </p>
        <p>
          <span @click="engidx = 7" :class="engidx == 7 ? 'engblue' : ''"
            >小学数学</span
          >
        </p>
        <p>
          <span @click="engidx = 8" :class="engidx == 8 ? 'engblue' : ''"
            >学习方法论</span
          >
        </p>
        <p>
          <span @click="engidx = 9" :class="engidx == 9 ? 'engblue' : ''"
            >小学科学</span
          >
        </p>
        <p>
          <span @click="engidx = 10" :class="engidx == 10 ? 'engblue' : ''"
            >趣味英语</span
          >
        </p>
        <p>
          <span @click="engidx = 11" :class="engidx == 11 ? 'engblue' : ''"
            >光影作文</span
          >
        </p>
        <p>
          <span @click="engidx = 12" :class="engidx == 12 ? 'engblue' : ''"
            >小升初</span
          >
        </p>
      </div>

      <p>知识点</p>
      <div class="note">
        <span @click="know = 13" :class="know == 13 ? 'engblue' : ''"
          >初中几何</span
        >
        <span @click="know = 14" :class="know == 14 ? 'engblue' : ''"
          >初中数代</span
        >
        <span @click="know = 15" :class="know == 15 ? 'engblue' : ''"
          >概率与统计</span
        >
        <span @click="know = 16" :class="know == 16 ? 'engblue' : ''"
          >综合专题</span
        >
      </div>
      <button @click="subtn">确定</button>
    </div>
    <cell title="年级" :value="nianji" is-link @click="gr" />
    <div class="grade" v-show="gradeshow">
      <p>小学</p>
      <div class="Primary">
        <p>
          <span @click="sml = 1" :class="sml == 1 ? 'engblue' : ''"
            >一年级</span
          >
        </p>
        <p>
          <span @click="sml = 2" :class="sml == 2 ? 'engblue' : ''"
            >二年级</span
          >
        </p>
        <p>
          <span @click="sml = 3" :class="sml == 3 ? 'engblue' : ''"
            >三年级</span
          >
        </p>
        <p>
          <span @click="sml = 4" :class="sml == 4 ? 'engblue' : ''"
            >四年级</span
          >
        </p>
        <p>
          <span @click="sml = 5" :class="sml == 5 ? 'engblue' : ''"
            >五年级</span
          >
        </p>
        <p>
          <span @click="sml = 6" :class="sml == 6 ? 'engblue' : ''"
            >六年级</span
          >
        </p>
      </div>

      <p>初中</p>
      <div class="junior">
        <p>
          <span @click="sml = 7" :class="sml == 7 ? 'engblue' : ''"
            >七年级</span
          >
        </p>
        <p>
          <span @click="sml = 8" :class="sml == 8 ? 'engblue' : ''"
            >八年级</span
          >
        </p>
        <p>
          <span @click="sml = 9" :class="sml == 9 ? 'engblue' : ''"
            >九年级</span
          >
        </p>
      </div>

      <p>高中</p>
      <div class="high">
        <p>
          <span @click="sml = 10" :class="sml == 10 ? 'engblue' : ''"
            >高一</span
          >
        </p>
        <p>
          <span @click="sml = 11" :class="sml == 11 ? 'engblue' : ''"
            >高二</span
          >
        </p>
        <p>
          <span @click="sml = 12" :class="sml == 12 ? 'engblue' : ''"
            >高三</span
          >
        </p>
      </div>
      <button @click="grbtn">确认</button>
    </div>
    <!-- <router-link :to="{ name: 'User-address' }">
      <cell title="地区" :value="diqu" is-link
    /></router-link>
    <router-link :to="{ name: 'User-school' }"
      ><cell title="学校" :value="school" is-link
    /></router-link> -->
  </ul>
  <ul class="touth">
    <div>
      <cell title="QQ" is-link /><img src="./image/QQ.png" alt="" /><span
        @click="bind"
        :id="current == true ? 'bind' : ''"
        >{{ tie ? "绑定" : "解绑" }}</span
      >
    </div>
    <div>
      <cell title="新浪微博" is-link /><img src="./image/wb.png" alt="" /><span
        @click="bin"
        :id="curren == true ? 'bind' : ''"
        >{{ Tie ? "绑定" : "解绑" }}</span
      >
    </div>
    <div>
      <cell title="微信" is-link /><img src="./image/wx.png" alt="" /><span
        @click="bi"
        :id="curre == true ? 'bind' : ''"
        >{{ tiee ? "绑定" : "解绑" }}</span
      >
    </div>
  </ul>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
  NavBar,
  Cell,
  CellGroup,
  Icon,
  Overlay,
  Uploader,
  DatetimePicker,
  Toast,
} from "vant";
import axios from "../utils/request";

import { dalImg, getToken } from "../utils/tools";
import "font-awesome/css/font-awesome.min.css";
import { post, get } from "../utils/request";
import { userdata, updata, avatar } from "../API/shang";
import { upUserDataAPI, getUserAPI, AddUserImgAPI } from "../API/li";

const nickname = ref("");
const username = ref("未设置");
const email = ref("未设置");
const xueke = ref("未设置");
const diqu = ref("未设置");
const nianji = ref("未设置");
const school = ref("未设置");
const ID = ref("");
const sex = ref("男");
const fileTag = ref("");
const Imgurl = ref("");
let headProtraits = ref("");

getUserAPI().then((res) => {
  ID.value = res.data.id;
});
upUserDataAPI(
  ID.value,
  sex.value,
  email.value,
  username.value,
  nickname.value,
  xueke.value,
  diqu.value,
  school.value,
  nianji.value,
  Imgurl.value
).then((res) => {
  console.log(res);
});
// 获取用户信息;
getUserAPI().then((res) => {
  ID.value = res.data.id;
  console.log(res.data);
  nickname.value = res.data.nickname;
  username.value = res.data.username == null ? "未设置" : res.data.username;
  email.value = res.data.eMail == null ? "未设置" : res.data.eMail;
  sex.value = res.data.sex == null ? "未设置" : res.data.sex;
  school.value = res.data.school == null ? "未设置" : res.data.school;
  diqu.value = res.data.region == null ? "未设置" : res.data.region;
  xueke.value = res.data.subject == null ? "未设置" : res.data.subject;
  nianji.value = res.data.grade == null ? "未设置" : res.data.grade;
  Imgurl.value =
    res.data.headProtrait == null
      ? "https://img0.baidu.com/it/u=2556283513,3314307180&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500"
      : res.data.headProtrait;
  //更新用户信息
  upUserDataAPI(
    ID.value,
    sex.value,
    email.value,
    username.value,
    nickname.value,
    xueke.value,
    diqu.value,
    school.value,
    nianji.value,
    Imgurl.value
  ).then((res) => {
    console.log(res);
  });
});

let noNickname = () => {
  Toast.fail("账号不能修改");
};

//头像

const selImg = () => {
  fileTag.value.click();
};
// AddUserImgAPI().then((res) => {
//   console.log(res);
// });

//上传头像
const selEnd = () => {
  console.log(fileTag.value.files);
  const formData = new FormData();
  formData.append("file", fileTag.value.files[0]);
  axios
    .post("/api/user_data/upload/avatar", formData, { headers: getToken() })
    .then((res) => {
      console.log(res);
      Imgurl.value = res.data;
      show.value = false;
      headshow.value = false;
      upUserDataAPI(
        ID.value,
        sex.value,
        email.value,
        username.value,
        nickname.value,
        xueke.value,
        diqu.value,
        school.value,
        nianji.value,
        Imgurl.value
      ).then((res) => {
        console.log(res);
        console.log(Imgurl.value);
      });
    });
};

//  console.log(user.value);
const router = useRouter();
const gradeshow = ref(false);
const Subshow = ref(false);
const datashow = ref(false);
const genshow = ref(false);
const show = ref(false);
const headshow = ref(false);
const sml = ref(0);
const know = ref(0);
const engidx = ref(0);
const gen = ref(2);
const onClickLeft = () => {
  router.go(-1);
};
const head = () => {
  show.value = true;

  headshow.value = true;
};

/* 绑定 */

const current = ref(false);
const curre = ref(false);
const curren = ref(false);
const tie = ref(true);
const Tie = ref(true);
const tiee = ref(true);
const bind = () => {
  current.value = !current.value;
  tie.value = !tie.value;
};
const bin = () => {
  curren.value = !curren.value;
  Tie.value = !Tie.value;
};
const bi = () => {
  curre.value = !curre.value;
  tiee.value = !tiee.value;
};
/* 性别 */
const gender = () => {
  show.value = true;
  genshow.value = true;
};
/* 遮罩层 */
const overshow = () => {
  show.value = false;
  headshow.value = false;
  genshow.value = false;
  Subshow.value = false;
  gradeshow.value = false;
};
const clockgen = () => {
  show.value = false;
  genshow.value = false;
  if (gen.value == 0) {
    sex.value = "男";
  } else {
    sex.value = "女";
  }
  upUserDataAPI(
    ID.value,
    sex.value,
    email.value,
    username.value,
    nickname.value,
    xueke.value,
    diqu.value,
    school.value,
    nianji.value
  ).then((res) => {
    console.log(res);
  });
};
/* 生日 */
const data = () => {
  show.value = true;
  datashow.value = true;
};
/* 学科 */
const sub = () => {
  show.value = true;
  Subshow.value = true;
};
const subtn = () => {
  show.value = false;
  Subshow.value = false;
  console.log(engidx.value);
  switch (engidx.value) {
    case 1:
      xueke.value = "初中数学";
      break;
    case 2:
      xueke.value = "经典语文";
      break;
    case 3:
      xueke.value = "趣味英语";
      break;
    case 4:
      xueke.value = "初中物理";
      break;
    case 5:
      xueke.value = "初中化学";
      break;
    case 6:
      xueke.value = "高中数学";
      break;
    case 7:
      xueke.value = "小学数学";
      break;
    case 8:
      xueke.value = "学习方法论";
      break;
    case 9:
      xueke.value = "小学科学";
      break;
    case 10:
      xueke.value = "趣味英语";
      break;
    case 11:
      xueke.value = "光影作文";
      break;
    case 12:
      xueke.value = "小升初";
      break;

    default:
      break;
  }
  console.log(xueke.value);
  upUserDataAPI(
    ID.value,
    sex.value,
    email.value,
    username.value,
    nickname.value,
    xueke.value,
    diqu.value,
    school.value,
    nianji.value
  ).then((res) => {
    console.log(res);
  });
};
/* 年级 */
const gr = () => {
  gradeshow.value = true;
  show.value = true;
};
const grbtn = () => {
  show.value = false;
  gradeshow.value = false;

  switch (sml.value) {
    case 1:
      nianji.value = "一年级";
      break;
    case 2:
      nianji.value = "二年级";
      break;
    case 3:
      nianji.value = "三年级";
      break;
    case 4:
      nianji.value = "四年级";
      break;
    case 5:
      nianji.value = "五年级";
      break;
    case 6:
      nianji.value = "六年级";
      break;
    case 7:
      nianji.value = "七年级";
      break;
    case 8:
      nianji.value = "八年级";
      break;
    case 9:
      nianji.value = "九年级";
      break;
    case 10:
      nianji.value = "高一";
      break;
    case 11:
      nianji.value = "高二";
      break;
    case 12:
      nianji.value = "高三";
      break;

    default:
      break;
  }
  console.log(nianji.value);
  upUserDataAPI(
    ID.value,
    sex.value,
    email.value,
    username.value,
    nickname.value,
    xueke.value,
    diqu.value,
    school.value,
    nianji.value
  ).then((res) => {
    console.log(res);
  });
};
</script>
<style scoped>
.icon {
  float: right;
  text-indent: 0rem;
  margin: 1rem 1rem 0 0.5rem;
}
ul {
  width: 100%;
  border-top: 0.3125rem solid rgb(241, 243, 249);
}
li .tx {
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  border: 0.0625rem solid #858484;
  text-indent: 0rem;
  margin-top: 6px;
  float: right;
  border: none;
}
li {
  line-height: 7vh;
  height: 7vh;
  text-indent: 1em;
  border-bottom: 0.0625rem solid #efeeee;
}
.head {
  width: 100%;
  height: 16vh;
  position: absolute;
  bottom: 0;
  z-index: 2;
  padding: 2vh 3vw;
  box-sizing: border-box;
}
.head p {
  background-color: white;
  width: 100%;
  margin-bottom: 1vh;
  border-radius: 0.3125rem;
}
.head p span {
  display: block;
  height: 5vh;
  text-align: center;
  line-height: 5vh;
  color: var(--main-color);
  font-size: 0.6rem;
}
.pan {
  border-bottom: 0.0625rem solid rgb(245, 245, 245);
}
.touth {
  position: relative;
  width: 100%;
  height: 20vh;
}
.touth div {
  position: relative;
  width: 100%;
  height: 2.75rem;
}
.touth div img {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0.625rem;
  bottom: 0.625rem;
}
.touth div span {
  position: absolute;
  right: 0.5rem;
  bottom: 0.9375rem;
  font-size: 0.625rem;
  text-align: center;
  display: inline-block;
  width: 1.875rem;
  background-color: rgb(25, 151, 235);
  color: white;
  border-radius: 10px;
}
#bind {
  position: absolute;
  right: 0.5rem;
  bottom: 0.9375rem;
  font-size: 0.625rem;
  text-align: center;
  display: inline-block;
  width: 1.875rem;
  background-color: gray;
  color: white;
  border-radius: 10px;
}
.touth div .van-cell {
  box-sizing: border-box;
  position: absolute;
  padding-left: 2.4375rem;
  bottom: 0;
}
.gender {
  position: absolute;
  top: 35%;
  left: 25%;
  z-index: 2;
  width: 12.5rem;
  height: 12.5rem;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  border: 1px solid #cecece;
  display: flex;
  flex-direction: column;
}
.gender > div {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.gender div div {
  display: flex;
  flex-direction: column;
}
.gender p {
  text-align: center;
  line-height: 3.125rem;
  font-weight: 500;
}
.gender button {
  width: 40%;
  height: 1.875rem;
  border: none;
  border-radius: 0.3125rem;
  background-color: var(--main-color);
  color: white;
  font-size: 0.8rem;
}
#genblue {
  color: var(--main-color);
}
.Subject {
  position: relative;
  width: 70%;
  height: 40vh;
  position: absolute;
  top: 35%;
  left: 15%;
  z-index: 2;
  background-color: white;
  border-radius: 0.5rem;
}
.Subject > p {
  height: 2.4rem;
  line-height: 2.4rem;
  color: gray;
  font-size: 0.8rem;
  text-indent: 0.5rem;
}
.eng {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.eng p {
  display: inline-block;
  width: 30%;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5625rem;
}
.note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.note span {
  width: 30%;
  font-size: 0.8rem;
  text-align: center;
}
.Subject button {
  width: 100%;
  height: 1.875rem;
  position: absolute;
  bottom: 0;
  border: none;
  background-color: var(--main-color);
  color: white;
  font-size: 0.9rem;
  border-radius: 0 0 0.5rem 0.5rem;
}
.engblue {
  color: blue;
}
.grade {
  position: relative;
  width: 70%;
  height: 40vh;
  position: absolute;
  top: 35%;
  left: 15%;
  z-index: 2;
  background-color: white;
  border-radius: 0.5rem;
  border: #858484 1px solid;
}
.grade > p {
  height: 2.4rem;
  line-height: 2.4rem;
  color: gray;
  font-size: 0.8rem;
  text-indent: 0.5rem;
}
.Primary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.Primary p {
  display: inline-block;
  width: 30%;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5625rem;
}
.junior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.junior p {
  display: inline-block;
  width: 30%;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5625rem;
}
.high {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.high p {
  display: inline-block;
  width: 30%;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5625rem;
}

.grade button {
  width: 100%;
  height: 1.875rem;
  position: absolute;
  bottom: 0;
  border: none;
  background-color: var(--main-color);
  color: white;
  font-size: 0.9rem;
  border-radius: 0 0 0.5rem 0.5rem;
}
</style>
